<template>
  <div class="count-com">
    <a class="count" href="javascript:;" @click="toggle(-1)">-1</a>
    <span class="g-color">Count值在子组件的值为 {{ num }}</span>
    <a class="count" href="javascript:;" @click="toggle(1)">+1</a>
  </div>

</template>

<script>
import {useVModel} from "@vueuse/core";

export default {
  name: "Count",
  props: {
    num: {
      type: Number,
      default: 0
    }
  },
  setup(props, {emits}) {
    const data = useVModel(props, 'num', emits);

    const toggle = (temp) => {
      data.value += temp    // 等于 emit("update:num", data.value + temp)
      // 在这里, 可以手动触发一个自定义事件
      emits("change", {})
    }
    return {
      data,
      toggle
    }
  }
}
</script>

<style lang="less" scoped>
.count-com {
  display: flex;
  height: 30px;
  align-items: center;

  .count {
    margin: 0 20px;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;

    background-color: #e4e4e4;
    border-radius: 50%;
  }
}
</style>
